<template>
    <view id="main">
        <zy-tab :scrollable="true" lineColor="#0077FF" :activeStyle="{
            fontWeight: 'bold',
            transform: 'scale(1.1)',
            color: '#0077FF',
        }" lineWidth="120rpx" @click-tab="changeTab" v-model="current" :data="list"></zy-tab>
        <view class="content">
            <scroll-view scroll-y>
                <view v-if="current === '1'">
                    <view class="container corpuscle">
                        <view class="card">
                            <view class="form_item">
                                <view class="label">
                                    <view class="text">重量获取方式</view>
                                </view>
                                <view @tap="showPopup" class="handle_box flex">
                                    <input value="" placeholder="请选择重量获取方式" disabled
                                        placeholder-style="color: #CCCCD3;font-size:14px" />
                                    <uni-icons type="right" color="#1D2541" size="20" />
                                </view>
                            </view>
                            <view class="form_item">
                                <view class="label">
                                    <view class="text">选择电子地秤</view>
                                </view>
                                <view class="handle_box flex">
                                    <input value="" placeholder="请选择电子地秤" disabled
                                        placeholder-style="color: #CCCCD3;font-size:14px" />
                                    <uni-icons type="right" color="#1D2541" size="20" />
                                </view>
                            </view>
                            <view class="form_item">
                                <view class="label">
                                    <view class="text">重量</view>
                                </view>
                                <view class="handle_box flex">
                                    <input value="" placeholder="" placeholder-style="color: #CCCCD3;font-size:14px" />
                                </view>
                            </view>
                        </view>
                    </view>

                </view>
                <view v-if="current === '2'">
                    <view class="container car">
                        <view class="top_bg">
                            <view class="Real_time_weight">
                                <view class="fw_600 fs_30 flex">
                                    <view>0</view>
                                    <view class="fs_16">t</view>
                                </view>
                                <view class="fs_12">实时重量</view>
                            </view>
                            <image src="@/static/img/weigh.png" />
                        </view>
                        <view class="card">
                            <view class="form_item">
                                <view class="label">
                                    <view class="tag"></view>
                                    <view class="text">重量获取方式</view>
                                </view>
                                <view @tap="showPopup" class="handle_box flex">
                                    <input value="" placeholder="请选择重量获取方式" disabled
                                        placeholder-style="color: #CCCCD3;font-size:14px" />
                                    <uni-icons type="right" color="#1D2541" size="20" />
                                </view>
                            </view>
                            <view class="form_item">
                                <view class="label">
                                    <view class="tag"></view>
                                    <view class="text">连接设备</view>
                                </view>
                                <view @tap="" class="handle_box flex">
                                    <input value="" placeholder="请选择" disabled
                                        placeholder-style="color: #CCCCD3;font-size:14px" />
                                    <uni-icons type="right" color="#1D2541" size="20" />
                                </view>
                            </view>
                            <view class="form_item">
                                <view class="label">
                                    <view class="text">满载重量(t)</view>
                                </view>
                                <view class="handle_box flex">
                                    <input value="0" placeholder="请选择电子地秤" disabled
                                        placeholder-style="color: #CCCCD3;font-size:14px" />
                                    <view class="handle_box_btn">获取</view>
                                </view>
                            </view>
                            <view class="form_item">
                                <view class="label">
                                    <view class="text">空载重量(t)</view>
                                </view>
                                <view class="handle_box flex">
                                    <input value="0" placeholder="请选择电子地秤" disabled
                                        placeholder-style="color: #CCCCD3;font-size:14px" />
                                    <view class="handle_box_btn">获取</view>
                                </view>
                            </view>
                            <view class="form_item">
                                <view class="label">
                                    <view class="text">净重(t)</view>
                                </view>
                                <view class="handle_box flex">
                                    <input value="0" placeholder="" placeholder-style="color: #CCCCD3;font-size:14px" />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- popup -->
        <uni-popup ref="popup" type="bottom">
            <view class="popup_content">
                <view class="popup_title fs_16">选择设备类型</view>
                <view class="popup_body">
                    <view class="popup_item active">蓝牙获取</view>
                    <view v-if="current === '2'" class="popup_item">
                        接口获取
                    </view>
                    <view v-else class="popup_item">串口获取</view>
                </view>
                <view class="popup_footer flex ">
                    <zy-btn @tap="closePopup" color="#0077FF" backgroundColor="#F7F7F7">
                        取消
                    </zy-btn>
                    <zy-btn @tap="goList" backgroundColor="#1858E6">
                        确定
                    </zy-btn>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script lang="ts" setup>
// 弹窗
const popup = ref<any>(null)
const showPopup = () => {
    popup.value.open()
}
const closePopup = () => {
    popup.value.close()
}
const list = [
    { value: "1", name: "电子地磅称重" },
    { value: "2", name: "车载称重" },
];
const searchParam = ref("");
const search = (val: string) => {
    console.log(val);
};
const goList = () => {
    popup.value.close();
    uni.navigateTo({
        url: "/pages/weighbridge/list/list",
    })
};
// tab切换
const current = ref("1"); // 当前tab索引
onMounted(() => {
});
const changeTab = async (e: any) => {
    console.log(e);

};
</script>

<style lang="scss" scoped>
scroll-view {
    height: calc(100vh - 108px);
}

.container {
    width: 92%;
    margin: auto;

    &.car {
        .top_bg {
            margin-top: 10px;
            width: 100%;
            height: 140px;
            position: relative;
            z-index: 0;

            .Real_time_weight {
                position: absolute;
                top: 50%;
                left: 20%;
                transform: translate(-50%, -50%);

                .flex {
                    align-items: flex-end;

                    .fs_16 {
                        margin-left: 5px;
                    }
                }
            }

            image {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
        }
    }
}

.card {
    margin: 10px 0;

    .title {
        margin-bottom: 20px;
    }

    .form_item {
        margin-bottom: 6px;
        border-bottom: 0.5px solid rgb(226, 227, 235);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;

        &:last-child {
            border-bottom: none;
        }

        &.datetime {
            .handle_box {
                width: 100%;
            }
        }

        &.text_area {
            flex-direction: column;
            align-items: flex-start;
            border: 0;

            .label {
                margin-bottom: 14px;
            }
        }

        .label {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #2e323d;
            white-space: nowrap;
            width: 30%;

            .tag {
                margin-right: 5px;
                color: #E14146;
            }
        }

        .handle_box {
            justify-content: space-between;
            width: 70%;

            .handle_box_btn {
                background: rgb(13, 89, 210);
                width: fit-content;
                padding: 4px 8px;
                border-radius: 10px;
                color: #fff;
                font-size: 13px;
                white-space: nowrap;
            }
        }
    }
}

//弹窗样式
.popup_content {
    position: relative;
    padding: 20px;
    height: 300px;
    border-radius: 11px 11px 0px 0px;
    background: #fff;

    .popup_body {
        text-align: center;
        height: 70%;
        display: flex;
        flex-direction: column;

        justify-content: space-around;

        .popup_item {
            font-size: 15px;
            color: rgba(0, 0, 0, 0.3);
        }

        .popup_item.active {
            color: #000;
            font-size: 17px;
        }
    }

    .popup_footer {

        justify-content: center;

        .zk_btn {
            justify-content: center;
            margin: 0 12px;
            width: 30%;
        }
    }
}
</style>
